<template>
  <div>
    <div class="topOperation">
      <div class="topSearch_box" v-if="topSearch.length > 0">
        <div class="search_item" v-for="i in topSearch" :key="i.label">
          <span class="search_label">{{ i.searchText ? i.searchText : i.label }}&nbsp;&nbsp;</span>
          <el-select size="small" style="width:120px" v-if="i.type === 'radio' && i.prop === 'status'"
            v-model="searchForm[i.prop]" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
          <el-select size="small" style="width:150px"
            v-else-if="i.type === 'select' && (i.pageType === 'user' || i.prop === 'commandClass' || i.prop === 'status')"
            v-model="searchForm[i.prop]" clearable>
            <el-option v-for="item in i.optionlist" :key="item.code" :label="item.flag" :value="item.code" />
          </el-select>
          <el-input v-else-if="i.pageType === 'fixLog'" style="width:150px" size="small" v-model="searchForm['name']"
            clearable />
          <el-input v-else-if='i.searchProp' :style="{ width: i.searchWidth ? i.searchWidth : '200px' }" size="small"
            v-model="searchForm[i.searchProp]" clearable :placeholder="i.placeholder" @keyup.enter.native="getSearch" />
          <el-input v-else style="width:150px" size="small" v-model="searchForm[i.prop]" clearable
            @keyup.enter.native="getSearch" />
        </div>
        <el-button type="primary" size="small" @click="getSearch">查 询</el-button>
        <el-button size="small" @click="resetForm">重 置</el-button>
      </div>
      <div v-else>
        <slot name="topLeft"></slot>
      </div>
      <div class="rightBtn">
        <el-button-group slot="reference" v-if="showBtns">
          <el-button size="small" icon="el-icon-refresh" @click="getSearch" />
          <el-popover placement="bottom" width="100" trigger="click" class="el_popoverBox">
            <el-checkbox-group v-model="checkList">
              <el-checkbox @change='checkboxChange(item, index)' style="margin-bottom:10px"
                v-for="(item, index) in columnList" :key='index' :label="index" :disabled='Boolean(item.slot)'>{{
        item.label }}</el-checkbox>
            </el-checkbox-group>
            <el-button slot="reference" size="small" icon="el-icon-s-grid">
              <i v-if="showTableCell" class="el-icon-caret-top"></i>
              <i v-else class="el-icon-caret-bottom"></i>
            </el-button>
          </el-popover>
          <slot name="btns"></slot>
        </el-button-group>
        <slot v-else name="btns"></slot>
      </div>
    </div>
    <el-table ref="multipleTable" :data="listObject.list || []" :row-key="rowKey" lazy :load="load"
      :tree-props="treeProps" :border='border' style="width: 100%" v-loading="loading"
      @selection-change="handleSelectionChange" @row-click="rowClick" @sort-change="sortChange">
      <el-table-column v-if="showCheckBox" type="selection" width="55" align="center" :reserve-selection="true" />
      <el-table-column v-if="showIndex" label="序号" type="index" width="50" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- 有分页时，序号显示 -->
          <span v-if="pageObj && hasPagination">{{ (pageObj.pageNo - 1) * pageObj.pageSize + scope.$index + 1 }}</span>
          <!-- 无分页时，序号显示 -->
          <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column v-for="(item,index) in columnList" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" /> -->
      <template v-for="(item, index) in columnList">
        <!-- 操作列/自定义列 -->
        <slot v-if="item.slot && item.show" :name="item.slot"></slot>
        <!-- 金额列 -->
        <el-table-column v-else-if="item.show && item.rounding" :key="index" :prop="item.prop" :label="item.label"
          :width="item.width || ''" :min-width="item.minwidth" :formatter="item.formatter" :align="item.align"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] | rounding }}</span>
          </template>
        </el-table-column>
        <!-- 排序列 -->
        <el-table-column sortable="custom" v-else-if="item.show && item.isSort" :key="item.prop" :prop="item.prop"
          :label="item.label" :width="item.width || ''" :min-width="item.minwidth" :formatter="item.formatter"
          :align="item.align" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.tooltip" :key="index + 90000000000" :prop="item.prop" :label="item.label"
          :width="item.width || ''" :min-width="item.minwidth" :formatter="item.formatter" :align="item.align"
          :show-overflow-tooltip="false">
        </el-table-column>
        <!-- 普通列 -->
        <el-table-column v-else-if="item.show" :key="index + 10000000000" :prop="item.prop" :label="item.label"
          :width="item.width || ''" :min-width="item.minwidth" :formatter="item.formatter" :align="item.align"
          :show-overflow-tooltip="true" />
      </template>
    </el-table>
    <div class="paginationBox" v-if="hasPagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageObj.pageNo" :page-sizes="[10, 20, 50, 100, 200, 500, 1000]" :page-size="pageObj.pageSize"
        :layout="layout" :total="pageObj.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    load: {
      type: Function
    },
    treeProps: {
      type: Object
    },
    rowKey: {
      type: [String, Number, Function],
      default: () => {
        return (val) => val.id
      }
    },
    // 是否显示序号
    showIndex: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 第一列是否显示checkbox
    showCheckBox: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 表单名称
    tabName: {
      type: String,
      default: ''
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 表单数据
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 列设置
    // search 为true，在topSearch_box区域显示搜索
    // type 为搜索的类型，type:select下拉框
    // { prop: 'name', label: '行业名称', width: '', align: 'left', search: true },
    columnList: {
      type: Array,
      defult: function () {
        return [{}]
      }
    },
    // 是否有分页
    hasPagination: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 列表信息
    listObject: {
      type: Object,
      default: function () {
        return {
          list: [],
          total: 0
        }
      }
    },
    // 分页信息
    pageObj: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否显示按钮组
    showBtns: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  components: {},
  data() {
    return {
      searchForm: {},
      showTableCell: false,
      checkList: [],
    }
  },
  computed: {
    topSearch() {
      let list = []
      if (this.columnList) {
        this.columnList.map(item => {
          if (item.search) {
            list.push(item)
          }
        })
      }
      return list
    }
  },
  watch: {},
  created() { },
  mounted() {
    if (this.columnList) {
      this.columnList.map((item, index) => {
        this.checkList.push(index)
        item.show = true
      })
    }
  },
  methods: {
    resetForm() {
      this.searchForm = {}
      this.getSearch()
    },
    handleSelectionChange(value) {
      this.$bus.$emit('selectionChange', value, this.tabName)
    },
    getSearch() {
      this.$emit('searchClick', this.searchForm)
      this.$nextTick(() => {
        this.$vnode.context.getPageList()
      })
    },
    checkboxChange(item) {
      item.show = !item.show
    },
    // 取消checkbox 选中的值
    cancleSelect() {
      this.$refs.multipleTable.clearSelection()
    },

    // 数量改变
    handleSizeChange(val) {
      this.$vnode.context.pageObj.pageSize = val
      this.$vnode.context.getPageList()
    },
    // 页码改变
    handleCurrentChange(val) {
      this.$vnode.context.pageObj.pageNo = val
      this.$vnode.context.getPageList()
    },
    // 当某一行被点击时会触发该事件
    rowClick(row, column, event) {
      if (column.label === '操作') {
        return
      }
      this.$emit('rowClick', row, column, event)
    },
    sortChange(column, prop, order) {
      if (column.order === 'ascending') {
        this.$vnode.context.pageObj.orderBy = column.prop + ' ' + 'asc'
      } else if (column.order === 'descending') {
        this.$vnode.context.pageObj.orderBy = column.prop + ' ' + 'desc'
      } else {
        this.$vnode.context.pageObj.orderBy = ''
      }
      this.$vnode.context.getPageList()
    }
  }
}
</script>

<style scoped lang="scss">
.topSearch_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .search_item {
    margin-right: 15px;

    .search_label {
      margin-right: 8px;
    }

    span {
      font-size: 14px;
      color: #333;
      font-weight: 600;
    }
  }
}

.topOperation {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .rightBtn {
    position: relative;

    .el_popoverBox {
      float: left;

      .el-popover__reference {
        box-sizing: border-box;
        border-radius: 0;

        // border-right: 0;
        &:active {}
      }
    }

    .el-button+.el-button {
      margin-left: 0;
    }
  }
}

.el-table__row:hover>td {
  background-color: #ffffff !important;
}

.el-table__row--striped:hover>td {
  background-color: #fafafa !important;
}

.el-table .el-table__header tr th {
  background: #fff;
  font-size: 14px;
}

.el-table .el-table__body tr td {
  font-size: 13px;
}

.paginationBox {
  text-align: right;
  margin-top: 20px;
}
</style>